---
title: Aggiungi Integrazioni
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'



**Le integrazioni di Astro** aggiungono nuove funzionalità e comportamenti al tuo progetto con solo poche righe di codice. Puoi scrivere una integrazione personalizzata, utilizzare un'integrazione ufficiale o utilizzare integrazioni create dalla comunità.

Le integrazioni possono...

- Sbloccare React, Vue, Svelte, Solid e altri popolari framework UI.
- Integrare strumenti come Tailwind e Partytown con poche righe di codice.
- Aggiungere nuove funzionalità al tuo progetto, come la generazione automatica di sitemap.
- Scrivere codice personalizzato che si integra nel processo di build, nel server di sviluppo e altro ancora.

:::tip[Directory delle integrazioni]
Sfoglia o cerca il set completo di centinaia di integrazioni ufficiali e della comunità nella nostra [directory delle integrazioni](https://astro.build/integrations/). Trova pacchetti da aggiungere al tuo progetto Astro per autenticazione, analisi, performance, SEO, accessibilità, UI, strumenti per sviluppatori e altro ancora.
:::

## Integrazioni Ufficiali

Le seguenti integrazioni sono mantenute da Astro.

<IntegrationsNav />

## Configurazione Automatica delle Integrazioni

Astro include un comando `astro add` per automatizzare la configurazione delle integrazioni ufficiali. Anche diversi plugin della comunità possono essere aggiunti utilizzando questo comando. Si prega di controllare la documentazione di ogni integrazione per vedere se `astro add` è supportato, o se devi [installare manualmente](#installazione-manuale).

Esegui il comando `astro add` utilizzando il gestore di pacchetti di tua scelta e la nostra procedura guidata automatica di integrazione aggiornerà il tuo file di configurazione e installerà tutte le dipendenze necessarie.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

È anche possibile aggiungere più integrazioni contemporaneamente!

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Gestione delle dipendenze delle integrazioni]
Se vedi avvisi come `Cannot find package '[package-name]'` dopo aver aggiunto un'integrazione, il tuo gestore di pacchetti potrebbe non aver installato [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) per te. Per installare questi pacchetti mancanti, esegui `npm install [package-name]`.
:::

### Installazione Manuale

Le integrazioni di Astro sono sempre aggiunte tramite la proprietà `integrations` nel tuo file `astro.config.mjs`.

Ci sono tre modi comuni per importare un'integrazione nel tuo progetto Astro:
1. [Installare un'integrazione di un pacchetto npm](#installazione-di-un-pacchetto-npm).
2. Importare la tua integrazione da un file locale all'interno del tuo progetto.
3. Scrivere la tua integrazione inline, direttamente nel tuo file di configurazione.

    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';

    export default defineConfig({
      integrations: [
        // 1. Importata da un pacchetto npm installato
        installedIntegration(),
        // 2. Importata da un file JS locale
        localIntegration(),
        // 3. Un oggetto inline
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });
    ```

Dai un'occhiata al riferimento [API di Integrazione](/it/reference/integrations-reference/) per imparare tutti i modi diversi in cui puoi scrivere un'integrazione.

#### Installazione di un Pacchetto NPM

Installa un'integrazione di un pacchetto NPM utilizzando un gestore di pacchetti, e poi aggiorna manualmente `astro.config.mjs`.

Ad esempio, per installare l'integrazione `@astrojs/sitemap`:

1. Installa l'integrazione nelle dipendenze del tuo progetto utilizzando il gestore di pacchetti preferito:

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Importa l'integrazione nel tuo file `astro.config.mjs` e aggiungila al tuo array `integrations[]`, insieme a qualsiasi opzione di configurazione:

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Nota che diverse integrazioni possono avere diverse impostazioni di configurazione. Leggi la documentazione di ogni integrazione e applica le opzioni di configurazione necessarie alla tua integrazione scelta in `astro.config.mjs`

### Opzioni Personalizzate

Le integrazioni sono quasi sempre scritte come funzioni factory che restituiscono l'oggetto di integrazione effettivo. Questo ti permette di passare argomenti e opzioni alla funzione factory che personalizzano l'integrazione per il tuo progetto.

```js
integrations: [
  // Esempio: Personalizza la tua integrazione con argomenti di funzione
  sitemap({filter: true})
]
```

### Disattivare un'Integrazione

Le integrazioni false vengono ignorate, quindi puoi attivare e disattivare le integrazioni senza preoccuparti di valori `undefined` e booleani lasciati indietro.

```js
integrations: [
  // Esempio: Salta la creazione di una sitemap su Windows
  process.platform !== 'win32' && sitemap()
]
```

## Aggiornamento delle Integrazioni

Per aggiornare tutte le integrazioni ufficiali contemporaneamente, esegui il comando `@astrojs/upgrade`. Questo aggiornerà sia Astro che tutte le integrazioni ufficiali alle loro ultime versioni.

### Aggiornamento Automatico

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Aggiornamento Manuale

Per aggiornare manualmente una o più integrazioni, utilizza il comando appropriato per il tuo gestore di pacchetti.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Esempio: aggiorna le integrazioni React e Tailwind
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Esempio: aggiorna le integrazioni React e Tailwind
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Esempio: aggiorna le integrazioni React e Tailwind
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Rimozione di un'Integrazione

Per rimuovere un'integrazione, disinstalla prima l'integrazione dal tuo progetto

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

Successivamente, rimuovi l'integrazione dal tuo file `astro.config.*`:

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});
```

## Trovare Altre Integrazioni

Puoi trovare molte integrazioni sviluppate dalla comunità nella [Directory delle Integrazioni di Astro](https://astro.build/integrations/). Segui i link lì per istruzioni dettagliate sull'uso e la configurazione.

## Costruire la Tua Propria Integrazione

L'API di Integrazione di Astro è ispirata da Rollup e Vite, e progettata per essere familiare a chiunque abbia mai scritto un plugin Rollup o Vite prima.

Dai un'occhiata al riferimento [API di Integrazione](/it/reference/integrations-reference/) per imparare cosa possono fare le integrazioni e come scriverne una tu stesso.
